<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>待办任务列表</title>
    <style>
        #app {
            width: 800px;
            margin: 0 auto;
            padding: 10px;
            border: 1px solid #ccc;
        }

        .content {
            width: 700px;
            margin: 0 auto;
        }

        .title {
            text-align: center;
        }

        .btn {
            height: 40px;
            width: 100px;
            margin-left: 10px;
            padding: 5px 10px;
            border: 1px solid #ccc;
            border-radius: 5px;
            background-color: #fff;
            cursor: pointer;
        }

        .all-count {
            background-color: #1363e3;
            color: #fff;
            padding: 10px 10px;
            border-radius: 5px;
        }

        .unfinish-count {
            background-color: #f4ad07;
            color: #fff;
            padding: 10px 10px;
            border-radius: 5px;
        }

        .task-input {
            width: 430px;
            height: 30px;
            padding: 5px 10px;
            border: 1px solid #ccc;
            border-radius: 5px;
            background-color: #fff;
            font-size: 16px;
        }

        .task-list {
            border-radius: 5px;
            list-style: none;
            padding: 0px;
        }

        .task-list li {
            padding: 5px;
            border: 1px solid #ccc;
            margin-top: 3px;
            border-radius: 5px;
            height: 40px;
            line-height: 40px;
        }

        .ckbox {
            width: 16px;
            height: 16px;
            cursor: pointer;
        }

        .done {
            text-decoration: line-through;
            color: #fff;
            background-color: green;
        }

        .normal {
            color: #000;
            background-color: #fff;
        }
    </style>
</head>

<body>
    <div id="app">
        <h1 class="title">我的待办任务</h1>
        <div class="content">
            <p>
                <span class="all-count">任务总数：{{taskNum}} 个</span>
                <span class="unfinish-count">未完成：{{complatedNum}} 个</span>
            </p>
            <p>
                <input class="task-input" placeholder="请输入新待办任务" type="text"  v-model="newTask"/>
                <button class="btn" @click="addTask">添加任务</button>
                <button class="btn" @click="delDone">清除已完成</button>
            </p>
            <p>
            <h3>任务列表</h3>
            </p>
            <ul class="task-list" >
                <li  :class="!item.checked?'normal':'done'"  v-for="(item, index) in taskList" :key="index">
                    <input type="checkbox" :checked="item.checked" class="ckbox" @change="checkChange(item)"/>
                    <input v-if="item.status"  v-model="item.title" type="text" class="task-input" @blur="inputBlur(item)"/>
                    <span v-else @click="editStatus(item)">{{item.title}}</span>
                </li>
                <!-- <li class="done">
                    <input type="checkbox" class="ckbox" />
                    <input type="text" class="task-input" style="display: none;" />
                    <span>学习React</span>
                </li>
                <li class="normal">
                    <input type="checkbox" class="ckbox" />
                    <input type="text" class="task-input" style="display: none;" />
                    <span>学习Angular</span>
                </li> -->
            </ul>
        </div>

    </div>

    <script src="js/vue.js"></script>
    <script>
        // 待办任务列表
        // 文本框中输入新任务内容，点击“添加”按钮将新任务添加到任务列表中。
        // 单击未完成任务文字，切换为输入框显示，重新编辑后，离开焦点自动修改任务内容。
        // 任务已完成可点击前面的复选框，勾选后给li标签移除normal样式，添加done样式，并且未完成任务数需要减一。
        // 顶部显示任务总数、未完成任务数。点击“清除已完成”按钮，则删除所有已完成任务

        // TODO 使用Vue完成上述需求
        new Vue({
            el: "#app",
            data: {
                newTask:"",
                taskList: [
                    {title:"学习Vue",status:false,checked:false},
                    {title:"学习React",status:false,checked:false},
                    {title:"学习Angular",status:false,checked:false},
                ]
            },
            computed: {
                // 计算属性
                complatedNum(){
                    return this.taskList.filter(item=>!item.checked).length;
                },
                taskNum(){
                    return this.taskList.length;
                }
            },
            methods: {
                //函数
                editStatus(obj){
                    obj.status=!obj.status;
                },
                inputBlur(item){
                    item.status=!item.status;
                },
                checkChange(item){
                    item.checked=!item.checked
                    if(item.status){item.status=false}
                   
                },
                addTask(){
                    if(this.newTask.trim().length>0){
                        this.taskList.push({
                            title:this.newTask.trim(),status:false,checked:false
                        })
                    }
                    title:this.newTask="";
                },
                delDone(){
                    this.taskList=this.taskList.filter(item=>!item.checked);
                }
            },



        })





    </script>
</body>

</html>